<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Merry Christmas</title>
		<link rel="stylesheet" type="text/css" href="css/iSlider.css" />
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: white;
			}
			header {
				position: fixed;
				width: 100%;
				text-align: center;
				z-index: 9;
				/*border-top: dashed 2px white;
				border-bottom: dashed 2px white;*/
			}

			section {
				width: 100%;
				height: 500px;
				background-color: #E2353A;
				/*position: fixed;*/
				z-index: 2;
			}

			section nav {
				align-self: center;
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}

			section nav img:nth-child(1) {
				position: absolute;
			}

			section nav img:nth-child(2) {
				position: absolute;
				bottom: 0;
				transform: rotate(180deg);
			}

			.textContent {
				background-color: #DBDBDD;
				box-sizing: border-box;
				padding: 20% 20px;
				transition: all 2s;
				overflow-y: scroll;
				border: 2px solid green;
				height: 100%;
				font-size: 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.wish {
				position: fixed;
				bottom: 7%;
				width: 100%;
				z-index: 99;
			}

			footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				z-index: 3;
			}
		</style>
		<!--字体效果-->
		<style>
			body .textcontainer {
				padding: 40px 0;
				text-align: center;
			}
			
			body .title {
				text-align: center;
				position: relative;
			}
			
			body .title.bubbles>.particle {
				opacity: 0;
				position: absolute;
				background-color: white;
				-webkit-animation: bubbles 3s ease-in infinite;
				animation: bubbles 3s ease-in infinite;
				border-radius: 100%;
			}
			
			@keyframes bubbles {
				0% {
					opacity: 0;
				}
				20% {
					opacity: 1;
					-webkit-transform: translate(0, -20%);
					transform: translate(0, -20%);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate(0, -1000%);
					transform: translate(0, -1000%);
				}
			}
			
		</style>
		<style type="text/css">
			#iSlider-wrapper {
				width: 100%;
				height: 18.75rem;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<header>
			<img src="images/leaves.png" width="100%" />
			<h3 class="bubbles title">Merry Christmas</h3>
		</header>
		<section>
			<nav class="snow" id="snow">
				<img src="images/top.png" width="200%" />
				<div class="textContent">
					<div id="iSlider-wrapper"></div>
					<p style="margin-top: 20px;text-indent: 20px;">
						<p style="text-indent: 20px;">
							该用什么词来形容你呢？
							原本以为我的那个女孩就像个魔咒只会沉睡于梦中，也就没有任何奢求了，就让她埋藏在心底最深处，在现实
							中追逐着梦想平平无奇过一生吧。可遇到你之后，这个魔咒被打破了，一次又一次的巧合已经让我习以为常，
							感觉就想上辈子安排好了一样。异常的合拍甚至让我怀疑你在我手机上装了监控。
							百年修得同船渡，千年修得共枕眠。
							究竟是什么样的运气才能遇上园园啊！
						</p>
						<div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px">——三石</div>
					</p>
				</div>
				<div class="wish" align="center" hidden="hidden">&gt;&gt;&gt;&gt;&gt;超级大礼&lt;&lt;&lt;&lt;&lt;</div>
				<iframe src="star.html" width="100%" height="100%" style="position: fixed;z-index: 999;"></iframe>
				<!-- <audio id="audio" src="audio/anheqiao.mp3" loop="loop"></audio> -->
				<audio id="audio" autoplay="autoplay" loop="loop">
					<source src="audio/anheqiao.mp3">
				</audio>
			</nav>
		</section>
		<footer>
			<img src="images/leaves.png" width="100%" />
		</footer>
		<script src="js/iSlider.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iSlider-animate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/snow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".PAY").css("height",window.screen.availHeight+'px')
			var snowS = document.getElementById("snowS");
			function IsPC() {
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"
				];
				var flag = true;
				for (var v = 0; v < Agents.length; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			}
			function addAudio() {
				// var audio = document.createElement('audio');
				// audio.id = "audio";
				// audio.loop = "loop";
				// audio.autoplay = "autoplay";
				// var source = document.createElement('source');
				// source.src = 'audio/anheqiao.mp3';
				// source.setAttribute('type', 'audio/mpeg');
				// audio.appendChild(source);
				// document.querySelector("section").append(audio);
				setTimeout(function() {
					console.log($("audio").get(0).play());
					// $("audio").attr("src","audio/rain.mp3").attr("autoplay","autoplay");
				}, 2500);
			}
			function fontShow(ele) {
				var font = $(ele).text();
				$(ele).text(""); //清空文本  为了填充处理后的文本
				var fontA = font.split("");
				console.log(font);
				//给每一个字体添加标签  方便操控
				for (var i = 0; i < fontA.length; i++) {
					var b = document.createElement("b");
					b.textContent = fontA[i];
					$(ele).append(b);
					b.style.opacity = "0";
					$(b).animate({
						"opacity": "1"
					}, 10 * i * 1)
				}
		
			}
			//			fontShow($(".textContent"));
		
			var snowS = document.createElement("script");
			if (IsPC()) {
				snowS.src = "js/snow.js";
				document.body.appendChild(snowS);
			} else {
				var snowC = document.createElement("link");
				snowC.href = "css/snow3.css";
				document.head.appendChild(snowC)
				snowS.src = "js/websnowjq.js";
				document.body.appendChild(snowS);
				snowS.onload = function() {
				    $("#snow").websnowjq();
				}
			}
			addAudio();
		
			function bubbles() {
				$.each($(".title.bubbles"), function() {
					var bubblecount = ($(this).width() / 50) * 10;
					for (var i = 0; i <= bubblecount; i++) {
						var size = ($.rnd(40, 80) / 10);
						$(this).append('<span class="particle" style="top:' + $.rnd(20, 80) + '%; left:' + $.rnd(0, 95) + '%;width:' +
							size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0, 30) / 10) + 's;"></span>');
					}
				});
			}
		
			jQuery.rnd = function(m, n) {
				m = parseInt(m);
				n = parseInt(n);
				return Math.floor(Math.random() * (n - m + 1)) + m;
			}
		
			bubbles();
		
			function bjUpdate() {
				var colors = ["#435177", "#43776a", "#624377", "#86403a", "#d25b5b"]
				setInterval(function() {
					$(".textContent").css("background-color", colors[Math.ceil(Math.random() * colors.length)])
				}, 1000)
			}
			bjUpdate();
		
			function wish() {
				var wish = $(".wish");
				var flag = true;
				setInterval(function() {
					if (flag) {
						wish.fadeOut(300);
						flag = false;
					} else {
						wish.fadeIn(300);
						flag = true;
					}
				}, 600);
			}
			$(".wish").click(function() {
				// $(".textContent").remove();
				//open("star.html", "_self");
				let year=new Date().getYear();
				let month=new Date().getMonth()+1;
				let day=new Date().getDate();
				if(year>2020){
					location='menu.html'
				}else if(month==12&&day==25){
					location='menu.html'
				}else{
					alert("还未到打开超级大礼的时候哦！");
				}
			})
			setTimeout(function() {
				wish();
			}, 1000)
		</script>
		<script type="text/javascript">
			//导航图
			var list = [];
			let imgLen = 6;
			for (var i = 1; i <= imgLen; i++) {
				var content = '<img src="images/'+i+'.jpg" class="navImg" style="width:100%;height:100%;border-radius: 10px;"/>'
				list.push({
					content: content,
				});
			}
			console.log(list)
			setTimeout(function() {
				var islider = new iSlider(
					document.getElementById("(Ō̥̥̥̥̥̥̥ ԑ Ō̥̥̥̥̥̥̥ )"), list, {
						//                data: list,
						dom: document.getElementById("iSlider-wrapper"),
						//                isVertical: 1,
						// isLooping: 1,
						//                isOverspread: 1,
						animateType: 'rotate',
						//                delay: 3000,
						//                animateTime: 5000,
						dampingForce: 1,
						fillSeam: 1,
						fixPage: ['[x="ooxx"]', 'div'],
						// isDebug: 1,
						// isAutoplay: true,
						wakeupAutoplayDazetime: 1000,
						duration: 3000,
						isAutoplay: true,
						isLooping: 1,
						onSlideChange: function() {},
						_: null
					});
					console.log($("#iSlider-wrapper").get(0).clientWidth);
					// $(".navImg").css("width",$("#iSlider-wrapper").get(0).clientWidth+"px").css("height",window.screen.availHeight+"px");
				console.log($(".navImg"))
			}, 100);
			
			
			function getStyle(ele) {
				var style = null;
				if (window.getComputedStyle) {
					style = window.getComputedStyle(ele, null);
				} else {
					style = ele.currentStyle;
				}
				return style;
			}
			var heightW = window.screen.availHeight;
			var widthW = window.screen.availWidth;
			var section = document.querySelector("section");
			section.style.backgroundColor = "red";
			console.log(heightW);
			section.style.cssText = "height:" + heightW + "px";
			console.log(getStyle(section).height);
			//			//下雪特效
			//			var snowNum = 100; //雪花数量
			//			var snowOP = Math.random(); //雪花透明度
			//			for(var i = 0; i < snowNum; i++) {
			//				var snowSize = Math.ceil(Math.random() * 10); //雪花大小
			//				var locationX = Math.random() * widthW;
			//				var locationY = Math.random() * heightW;
			//				var snow = document.createElement("div");
			//				snow.className = "snow"
			//				snow.style.cssText = "width: " + snowSize + "px;height:" + snowSize + "px;position:absolute;top:0px;left:" + locationX +
			//					"px;background-color:white;border-radius:10px;box-shadow:0 0 8px #fff";
			//				section.querySelector("nav").appendChild(snow);
			//			}
			//			//雪花下落
			//			var snowIndex = 0;
			//			var snow = document.getElementsByClassName("snow");
			//			var speed = Math.random() * 10; //下雪速度
			//			setInterval(function() {
			//				$(snow).eq(1).animate({
			//					top: speed + "px"
			//				}, 300, function() {
			//					if(snowIndex >= snowNum) {
			//						snowIndex = 0;
			//					}
			//				})
			//				speed += 10;
			//			}, 1);
		</script>
	</body>

</html>
